<template>
	<view>
		<!-- 查看详情，重新编辑，删除记录 按钮 -->
		<TopNavCustom :title="title"></TopNavCustom>
		<view class="content">
			<text class="time">{{progressData.createTime}}</text>
			<view class="dynamicForm">
				<view class="add-zone">
					<view class="add-form">
						<u-cell-group :border="false">
							<u-cell size="normal" title="分部工程" :value="progressData.attributes.subproject">
							</u-cell>
							<u-cell size="normal" title="子分部工程" :value="progressData.attributes.SubdivisionProject">
							</u-cell>
							<u-cell size="normal" title="分项工程" :value="progressData.attributes.partName">
							</u-cell>
							<u-cell size="normal" title="进度" :value="getProgressValue(progressData.progressValue)">
							</u-cell>
							<u-cell size="normal" title="备注" :border="false"></u-cell>
							<view class="pixs">
								<textarea :value="progressData.attributes.tips" placeholder="请描述问题，最多输入200个字"
									disabled />
								<!-- <span class="numLimit">{{progressForm.input_num}}/200</span> -->
							</view>
							<u-cell size="normal" title="现场情况" :border="false"></u-cell>
							<view>
								<view
									v-if="progressData.attributes.video != null && progressData.attributes.video != ''">
									<text>视频</text>
									<view class="videoZone" @click="showVideo(progressData.attributes.video)">
										<text class="title">点击查看视频</text>
									</view>

									<!-- <video :src="getSrc(progressData.attributes.video)" controls
										class="video"></video> -->
									<!-- <j-video :url="getSrc(progressData.attributes.video)" height="300rpx"
										width="600rpx"></j-video> -->
									<!-- <web-view :webview-styles="webviewStyles"
										:src="getSrcVideo(progressData.attributes.video)"></web-view> -->


								</view>
								<view>
									<text style="margin-left: 30rpx;">图片</text>
									<view class="pixs">
										<view v-for="(img,i) in progressData.pixs">
											<image :src="getSrc(img)" class="pix"></image>
										</view>
									</view>
								</view>

							</view>
						</u-cell-group>
					</view>
				</view>
			</view>
			<view class="btns" v-if="progressData.progressStatus === 3">
				<button type="default" class="next" @click="()=>showModal = true">删除</button>
			</view>
			<view class="btns" v-if="progressData.progressStatus === 4">
				<button type="default" class="next" @click="goto()">重新编辑</button>
			</view>
		</view>
		<u-modal :show="showModal" title="删除记录" :content='content' @confirm="confirm" :showCancelButton='true'
			@cancel="()=>showModal=false">
		</u-modal>
	</view>
</template>

<script>
	import _progress from "@/common/progress.js"
	import $C from '@/common/config.js'

	export default {
		data() {
			return {
				content: '是否确认删除记录',
				showModal: false,
				opTitle: '',
				showRepeatBtn: false,
				pickerDateTitle: '',
				dateTime: Number(new Date()),
				time: uni.$u.timeFormat(false, 'yyyy-mm-dd'),
				dynamicForm: {
					items: []
				},
				progressData: {},
				fileIds: [],
				flag: 0,
				formList: [],
				fileList: [],
				columns: [],
				showEmpty: true,
				title: "",
				show: false,
				temp: {},
				_para: {},
				webviewStyles: {
					video: {
						width: '600rpx',
						height: '300rpx'
					}
				}
			};
		},
		onLoad(params) {
			this._para = params.item
			let temp = JSON.parse(decodeURIComponent(params.item))
			this.title = temp.partNames[2]
			this.progressData = temp
			this.progressData.pixs = temp.images.split(',')
			// this.getProgressDetails(temp.progressId)
			console.log(temp)
		},
		methods: {
			getProgressValue(value) {
				return value + '%'
			},
			showVideo(id) {
				if ((typeof id) != undefined && id != '') {
					// let _src = $C.baseUrl + '/file/' + id + '/play.mp4'
					let _src = $C.baseUrl + '/file/' + id + '/playHtml'
					console.log(_src)
					uni.navigateTo({
						url: "/pages/idata/progress/web_video/web_video?src=" + _src
					})
					// return _src
				}
			},
			getSrc(id) {
				if ((typeof id) != undefined && id != '') {
					let _src = $C.baseUrl + '/file/download?fileId=' + id
					return _src
				}
			},
			async getProgressDetails(id) {
				this.progressData = await _progress.getProgress(id)
			},
			async confirm() {
				const result = await _progress.deleteProgress(this.progressData.progressId)
				if (result) {
					uni.$showMsg('删除成功！')
					this.showModal = false
					uni.switchTab({
						url: "/pages/idata/data/data"
					})
				}
			},
			goto() {
				uni.navigateTo({
					url: '/pages/idata/progress/upload_progress/upload_progress?item=' + this._para
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 20rpx 30rpx 58rpx 30rpx;
	}

	.add-zone {
		padding: 20rpx;
		border: 1rpx solid #efefef;
		border-radius: 20rpx;
		background-color: #FFFFFF;
	}

	.add-form {
		display: flex;
		flex-direction: column;

		.pixs {
			margin-top: 20rpx;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;

			.pix {
				width: 200rpx;
				height: 200rpx;
				margin-right: 10rpx;
				margin-bottom: 20rpx;
			}
		}
	}

	.click-zone {
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		.pix {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.btns {
		margin-top: 88rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;

		.next {
			color: #FFFFFF;
			width: 560rpx;
			background: linear-gradient(90deg, #E62129 0%, #BA000A 100%);
			box-shadow: 0rpx 5rpx 15rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 44rpx;
		}
	}

	.video {
		width: 600rpx;
		height: 300rpx;
	}

	.videoZone {
		margin-top: 10rpx;
		background-color: #cdcdcd;
		border-radius: 20rpx;
		border: 1rpx dashed #efefef;
		display: flex;
		justify-content: center;
		align-content: center;
		width: 600rpx;
		height: 300rpx;

		.title {
			line-height: 300rpx;
			text-align: center;
		}
	}
</style>
